<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>Drawing Images</title>
    <meta name="order" content="05" />
  </head>
  <body>
    <h2>Drawing Images</h2>
    <p><span>A Pencil shape may contain some bitmap images. This tutorial will show how to embed an image to a stencil.</span> </p>
        <img
src="../images/Main_html_m6eadbed1.png"
        name="graphics20" alt="" border="0" height="48" width="38" style="float: right; margin-left: 2ex;">
    <p>Suppose that we have a bitmap image of a hand and we would like to create a stencil of the hande
    image with an editable name text.</p>
    <p>The first thing you have to do is to convert the image into BASE64 format which is supported by Pencil for
    embedding binary data. There are many ways for converting an image into BASE64, the method shown below is for the
    case you are working on a GNU/Linux box:</p>
<pre name="code" class="js:nocontrols:nogutter">
$ base64 --wrap=0 hand.png 
</pre>
    <p>After doing the conversion, you can copy the output and use it as in the below XML code:</p>
<pre name="code" class="xml"><![CDATA[
<Shape id="image" displayName="Image" icon="Icons/image.png">
  <Properties>
    <PropertyGroup>
      <Property name="box" type="Dimension" p:lockRatio="true">36,45</Property>
    </PropertyGroup>
    <PropertyGroup name="Text">
      <Property name="name" displayName="Name"
                type="PlainText">Hello World</Property>
      <Property name="textColor" displayName="Color"
                type="Color">#000000ff</Property>
      <Property name="textFont" displayName="Font"
                type="Font">Arial|normal|normal|13px</Property>
    </PropertyGroup>
  </Properties>
  <Behaviors>
    <For ref="image">
      <Box>$box</Box>
    </For>
    <For ref="name">
      <TextContent>$name</TextContent>
      <Fill>$textColor</Fill>
      <Font>$textFont</Font>
      <BoxFit>
        <Arg>new Bound(0, $box.h + 13, $box.w, 13)</Arg>
        <Arg>new Alignment(1, 1)</Arg>
      </BoxFit>
    </For>
  </Behaviors>
  <p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image id="image" x="0" y="0"
      xlink:href="... (BASE64 content of the image)" />
    <text id="name" />
  </p:Content>
</Shape>
]]></pre>
    <p>Note that the BASE64 content of the image is here used in the <code>xlink:href</code> attribute of SVG <code>image</code>
    as a URL in the form of <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">Data URL scheme</a>.</p>
  </body>
</html>
